<template>
  <Model
    :title="row.edit ? '编辑' : '添加'"
    :width="800"
    :show="show"
    @confirm="confirm"
    @cancel="cancel"
  >
    <Form slot="form">
      <FormDoubleItem :labels="['标题', '作者']">
        <a-input
          slot="left"
          v-model="row.title"
          placeholder="请输入内容"
        ></a-input>
        <a-input
          slot="right"
          v-model="row.author"
          placeholder="请输入内容"
        ></a-input>
      </FormDoubleItem>
      <FormDoubleItem :labels="['教师工号', '发表时间']">
        <a-input
          slot="left"
          v-model="row.teacherId"
          placeholder="请输入内容"
        ></a-input>
        <a-date-picker
          key="1"
          slot="right"
          v-if="!!row.time"
          show-time
          :defaultValue="moment(row.time, 'YYYY-MM-DD HH:mm:ss')"
          format="YYYY-MM-DD HH:mm:ss"
          @change="onChange"
        />
        <a-date-picker
          key="2"
          slot="right"
          v-if="!row.time"
          show-time
          :value="row.time"
          format="YYYY-MM-DD HH:mm:ss"
          @change="onChange"
        />
      </FormDoubleItem>
      <FormDoubleItem :labels="['审核', '期刊类型']">
        <a-select
          slot="left"
          placeholder="请选择"
          show-search
          option-filter-prop="children"
          style="width: 100%"
          :disabled="row.edit"
          v-model="row.check"
          :filter-option="filterOption"
        >
          <a-select-option v-for="item in check" :value="item" :key="item">
            {{ item }}
          </a-select-option>
        </a-select>
        <a-select
          slot="right"
          placeholder="请选择"
          show-search
          option-filter-prop="children"
          style="width: 100%"
          v-model="row.type"
          :filter-option="filterOption"
          @change="handleChange"
        >
          <a-select-option v-for="item in paperType" :value="item" :key="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </FormDoubleItem>
      <!-- <FormDoubleItem v-if="row.edit" :labels="['教师工号']">
        <a-input
          slot="left"
          v-model="row.teacherId"
          placeholder="请输入内容"
        ></a-input>
      </FormDoubleItem> -->
      <FormDoubleItem :labels="['期刊', '文件']">
        <a-input
          slot="left"
          v-model="row.journal"
          placeholder="请输入内容"
        ></a-input>
        <a-upload
          slot="right"
          :multiple="false"
          :remove="handleRemove"
          :before-upload="beforeUpload"
        >
          <a-button> <a-icon type="upload" /> 选择文件 </a-button>
        </a-upload>
        <!-- <a-radio-group
          style="width: 150px"
          slot="right"
          v-model="row.check"
          @change="onChange"
        >
          <a-radio v-for="item in check" :key="item" :value="item">
            {{ item }}
          </a-radio>
        </a-radio-group> -->
      </FormDoubleItem>
    </Form>
  </Model>
</template>

<script>
import Model from "components/common/model/Model";
import Form from "components/common/form/Form";
import FormItem from "components/common/form/formItem/FormItem";
import FormAlignItem from "components/common/form/formAlignItem/FormAlignItem";
import FormDoubleItem from "components/common/form/formDoubleItem/FormDoubleItem";
import { paperType, check } from "assets/data/other";
import { hasPropertyEmpty } from "common/index";
import moment from "moment";
export default {
  components: {
    Model,
    Form,
    FormDoubleItem,
    FormAlignItem,
  },
  props: {
    row: {
      type: Object,
      default() {
        return {
          author: "",
          check: undefined,
          file: "",
          journal: "",
          time: undefined,
          title: "",
          type: undefined,
        };
      },
    },
    show: {
      type: Boolean,
      defalut: false,
    },
  },
  data() {
    return {
      paperType,
      check,
      moment,
      fileList: [],
    };
  },
  methods: {
    handleChange(value) {
      // console.log(this.row.type);
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    onChange(value, dateString) {
      this.row.time = dateString;
    },
    beforeUpload(file) {
      this.fileList = [file];
      this.row.file = file;
      return false;
    },
    handleRemove(file) {
      const index = this.row.file.indexOf(file);
      const newFileList = this.row.file.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
      this.row.file = newFileList[0];
    },
    confirm() {
      const row = this.row;
      //当添加数据时，判断是否有表单项为空
      // if (!row.edit && hasPropertyEmpty(row)) return
      // return console.log(row.check);
      row.type = paperType.indexOf(row.type);
      row.check = check.indexOf(row.check);

      // return console.log(row);
      this.$emit("confirm", {
        ...row,
      });
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="less" scoped>
.ant-btn {
  width: 145.5px !important;
}
</style>